<template>
    <el-upload 
        class="upload" 
        drag 
        action="" 
        multiple 
        :http-request="resolveQR"
        :show-file-list="false"
        v-on="handlePaste"
    >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
        </div>
    <template #tip>
        <div class="el-upload__tip">
            请上传小于500kb的jpg/png文件
        </div>
    </template>
    </el-upload>
    <!-- <div id="preview" class="pase-div" v-on:paste="handlePaste">
        <span>将图片按Ctrl+V 粘贴至此处</span>
    </div> -->
</template>

<script lang="">
import QrcodeDecoder from 'qrcode-decoder'

export default{
    name: 'qr_code_decoder',
    methods:{
        resolveQR(event) {
            const url = window.webkitURL.createObjectURL(event.file);//适配了Google浏览器
            const qr = new QrcodeDecoder();
            const result = qr.decodeFromImage(url);
            result.then(res => {
                if (res.data) {
                // console.log(res.data);//得到解析出来的字符串
                this.$message.success("识别二维码成功!");
                this.$alert(res.data)
                } else {
                this.$message.error("识别二维码失败, 请重新上传");
                }
            })
            .catch(err => {
                this.$message.error(JSON.stringify(err));
            });
        }
    },
     // 监听粘贴操作
    // handlePaste(event) {
    //   const items = (event.clipboardData || window.clipboardData).items;
    //   let file = null;
    //   if (!items || items.length === 0) {
    //     this.$message.error("当前浏览器不支持本地");
    //     return;
    //   }
    //   // 搜索剪切板items
    //   for (let i = 0; i < items.length; i++) {
    //     if (items[i].type.indexOf("image") !== -1) {
    //       file = items[i].getAsFile();
    //       break;
    //     }
    //   }
    //   if (!file) {
    //     this.$message.error("粘贴内容非图片");
    //     return;
    //   }
      // 此时file就是我们的剪切板中的图片对象
      // 如果需要预览，可以执行下面代码
    //   const reader = new FileReader();
    //   reader.onload = (event) => {
    //     preview.innerHTML = `<img id="pase-img" src="${event.target.result}" style="width: 100%">`; // 添加style样式保证图片等比缩放
    //   };
    //   reader.readAsDataURL(file);
    //   this.pasteFile = file;
    // }
}
</script>

<style scoped>
/* .pase-div {
    width: 50%;
    min-height: 40px;
    border: 1px dashed #c0ccda;
    text-align: center;
} */
</style>